<template>
    <div class="">
        <div class="flex items-center">
            <div class="ml-12px">
                <el-button type="primary" size="small" @click="curdHandle(undefined)">
                    <Icon icon="ant-design:plus-outlined" class="mr-5px" />添加
                </el-button>
            </div>
        </div>
        <!-- <PlusOutlined /> -->
        <el-table :data="webInfo?.Proxy" v-loading="loading" header-row-class-name="cc-table" border
            highlight-current-row style="width: 100%;margin-top: 20px;">
            <el-table-column prop="ProxyName" label="代理名称" min-width="120"  show-overflow-tooltip />
            <el-table-column prop="SendDomainName" label="发送域名" width="120" show-overflow-tooltip />
            <el-table-column prop="TargetURL" label="目标URL" width="120" show-overflow-tooltip />
            <el-table-column prop="CacheTime" label="缓存时间(分)" width="120" show-overflow-tooltip />
            <el-table-column fixed="right" label="操作" width="60">
                <template #default="scope">
                    <!-- <el-button link type="primary" size="small" @click="curdHandle(scope.row)">编辑</el-button> -->
                    <el-button link type="primary" size="small" @click="delHandle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <ProxyInfoModal v-model="setModalVisible.crud" :info="info" :webInfo="webInfo" :crudInfo="crudInfo" @confirm="searchHandle" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import { propTypes } from '@/utils/propTypes'
import { ElMessage, ElMessageBox } from 'element-plus'
import ProxyInfoModal from "./ProxyInfoModal.vue"

const emit = defineEmits(['confirm'])
const props = defineProps({
    info: propTypes.object.def(undefined),
    webInfo: propTypes.object.def(undefined)
})

//table loading
const loading = ref(false)
//模态框控制
const setModalVisible = reactive({
    crud: false,
})

const crudInfo=ref(undefined)

//删除
const delHandle = (row) => {
    ElMessageBox.confirm('确认要删除这一项?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'delete-dialog'
    }).then(() => {
        ElMessage.success("待开发")
        searchHandle();
        // webDomainManagePhpWebAPI({
        //     domainName: props.info.domainName,
        //     optName: row.domainName,
        //     opt: "delete"
        // }).then(() => {
        //     ElMessage.success("删除成功")
        // })
    }).catch(() => { })
}
//查询
const searchHandle = () => {
    emit('confirm')
}

const curdHandle=(row)=>{
    crudInfo.value=row;
    setModalVisible.crud = true
}
</script>